<template>
<el-container class="container">
  <el-header class="header">
    <el-row>
     <el-col :span="4" class="left">
         <div class="grid-content bg-purple">
         <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591028681795&di=40aa771b1c2fa26cf03dad5f2a046536&imgtype=0&src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2015%2F0107%2F995a49af2048c5e25578ca421826b081.jpg" alt="">
         </div>
    </el-col>
     <el-col :span="18" class="cent">
         <h3>电商后台管理系统</h3>
     </el-col>
     <el-col :span="2" class="right">
         <p @click="loginout" class="loginout">退出</p>
     </el-col>
   </el-row>
</el-header>
<el-container>
    <el-aside width="200px" class="aside menu">
         <el-menu :unique-opened='true'
         :router="true"
         >
             <!-- 1 -->
      <!-- <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-s-tools"></i>
          <span>用户管理</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="users">
                  <i class="el-icon-menu"></i>
                  如果不开启它自带的路由 则是按下面的写法 path:'/home/users'
                  <router-link :to="{name:'users'}" tag="span">用户列表</router-link>
                  <span>用户列表</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu> -->
      <!-- 通过获取列表数据 进行循环出来 -->
      <el-submenu 
      v-for='item in data' 
      :key = 'item.id'
      :index="String(item.order)">
        <template slot="title">
          <i class="el-icon-s-tools"></i>
          <span>{{item.authName}}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item
          v-for='item2 in item.children'
          :key= 'item2.id'
          :index="item2.path">
                  <i class="el-icon-menu"></i>
                  <span>{{item2.authName}}</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      
     

    </el-menu>
    </el-aside>
    <el-main class="main">
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</template>
<script>
export default {
  //   :router="true" 如果在el-meau加上这个属性那么 里面的index会作为path进行传值，所以在配置路由的时候，不用'/home/users'
  // 如果没有token无法进入login页面
  data(){
    return {
      data:{}
    }
  },
  // 路由守卫拦截，进行token判断
  // beforeRouteEnter (to, from, next) {
  //   const token = localStorage.getItem('token')
  //   if (token) {
  //     next()
  //   } else {
  //     next(vm => {
  //       vm.$router.push('/login')
  //     })
  //   }
  // },
  methods: {
    loginout () {
      localStorage.removeItem('token')
      this.$message.success('退出成功')
      this.$router.push('/login')
    },
    async getmeuns(){
      const res  = await this.$http.get('menus')
     this.data = res.data.data
    //  console.log(res)
    }
  },
  created(){
    this.getmeuns()
  }
}
</script>
<style lang="scss" >
.container{
    height: 100%;
}
.header{
    background: rgb(102, 156, 252);
}
.aside{
     background:#d3dce6;
     height: 100%;
}
.main{
    background: #e9eef3;
    height: 100%;
}
.left img{
  height: 60px;
  width: 100%;
  max-width: 180px;
}
.cent{
text-align: center;
line-height: 60px;
font-size: 20px;
color: #fff
}
.right{
    line-height: 60px;
}
.menu{
    height: 100%;
}
.loginout{
   cursor: pointer;
   font-size: 14px;
   color: chocolate;
}
</style>
